<template>
  <div class="container">
    <div class="search-container block">
      <GlobalSearch
        :category="searchData.searchType"
        :condition-val="searchData.searchCondition"
        @searchClick="searchClick"
      ></GlobalSearch>
    </div>
    <div class="expose-main">
      <splitpanes class="default-theme">
        <pane max-size="70" min-size="20" size="25">
          <div
            v-loading="leftLoading"
            class="main-left"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            element-loading-spinner="el-icon-loading"
            element-loading-text="Loading"
          >
            <Tree @blur="blur" @checkClick="checkClick"></Tree>
            <ExposeListLeftContent
              :category="searchData.searchType"
              :public-data="publicData"
              @exposureHandle="exposureHandle"
            ></ExposeListLeftContent>
          </div>
        </pane>
        <pane>
          <div
            v-loading="loading"
            class="main-right"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            element-loading-spinner="el-icon-loading"
            element-loading-text="Loading"
          >
            <ExposeListTabs
              :tabs-data="tabsData"
              :tabsList="tabsList"
              @tabClick="tabClick"
            ></ExposeListTabs>

            <div class="listHead-wrap">
              <div class="head-right">
                共为您检测到 <span>{{ total }}</span> 条数据
              </div>
            </div>

            <div class="bottom-right-content">
              <ExposeListItem
                :category="searchData.searchType"
                :public-list="publicList"
                @clickItem="clickItem"
                @exposureHandle="exposureHandle"
                @successFn="successFn"
                @updateTags="getLeftList"
              ></ExposeListItem>

              <ElementPagination
                :current-page="searchData.pageNumber"
                :page-size="searchData.pageSize"
                :total="total"
                @handleCurrentChange="handleCurrentChange"
                @handleSizeChange="handleSizeChange"
              ></ElementPagination>
            </div>
          </div>
        </pane>
      </splitpanes>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { Pane, Splitpanes } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
import ExposeListLeftContent from '@/components/Attack/ExposeList/LeftContent.vue';
import ExposeListTabs from '@/components/Attack/ExposeList/Tabs.vue';
import ExposeListItem from '@/components/Attack/ExposeList/Item.vue';
import ElementPagination from '@/components/Attack/ElementPagination.vue';
import Tree from '@/components/Attack/Tree.vue';
import GlobalSearch from '@/components/Attack/GlobalSearch.vue';
import { useGetList } from '@/composables/Attack/useGetList';

const {
  handleSizeChange,
  handleCurrentChange,
  getList,
  searchClick,
  tabClick,
  blur,
  checkClick,
  exposureHandle,
  successFn,
  getLeftList,
  clickItem,
  leftLoading,
  publicList,
  searchData,
  tabsData,
  tabsList,
  loading,
  total,
  publicData,
} = useGetList();

onMounted(async () => {
  await getLeftList();
  await getList();
});
</script>

<style lang="scss" scoped>
.container {
  background-color: #f2f2f2;
  padding: 30px;
}

.search-container {
  margin-bottom: 12px;
  padding: 16px 10px;
}

.expose-main {
  width: 100%;
  // display: flex;
  .main-left {
    min-width: 270px;
    background: #fff;
    flex: 0 0 270px;
    margin-right: 12px;
  }

  .main-right {
    flex: 1;

    .listHead-wrap {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 50px;
      padding-left: 30px;

      .head-left {
        display: flex;
        align-items: center;

        .head-left-check {
          display: flex;
          align-items: center;
          margin-right: 30px;
          cursor: pointer;

          &.all-checked {
            .check-box {
              border: 1px solid $-v-color-primary;
              background: $-v-color-primary;

              &::after {
                content: '';
                display: block;
                width: 7px;
                height: 4px;
                border-left: 1px solid #fff;
                border-bottom: 1px solid #fff;
                transform: rotate(-45deg) translate(0px, 3px);
              }
            }
          }

          .check-box {
            margin-right: 4px;
            width: 12px;
            height: 12px;
            background: rgba(210, 222, 235, 0.1);
            border: 1px solid rgb(210, 222, 235);
            border-radius: 2px;
            box-sizing: border-box;
          }

          .check-title {
            font-size: 12px;
            font-weight: 500;
            line-height: 24px;
            cursor: pointer;
          }
        }

        .head-left-operate {
          cursor: pointer;
          margin-right: 30px;
        }
      }

      .head-right {
        font-size: 12px;
        // color: rgb(255, 255, 255);

        span {
          color: $-v-color-primary;
        }
      }
    }

    .bottom-right-content {
      min-height: 600px;
    }
  }
}
</style>
<style lang="scss">
.splitpanes.default-theme .splitpanes__splitter {
  background: none;

  &:hover {
    background: padding-box $-v-color-primary;
  }
}
</style>
